<template>
  <div class="WorkGroupChoose">
    <div class="flex" style="padding: .1rem;justify-content: left;flex-wrap: wrap" v-if="dDataList.length>0">
      <div class="flex-item work-group-item" v-for="v in dDataList" >
        <ImageBlock :img-src="domain+'/Uploads'+v.cover_img" class="ImageBlock" width="4.7rem">
          <span slot="rightTop">
            <CheckBtn  :state="WorkGroupIdChoose.indexOf(v.id)>-1?1:0"  :check_id="v.id" style="margin:.2rem" :data-id="v.id" @changeCheckState="changeCheckState($event)" width=".4rem" height=".4rem"></CheckBtn>
          </span>
        </ImageBlock>
        <div class="minifont" style="text-align: left">
          <div>{{v.artist_name}}</div>
          <div>{{v.has_work_count}}个作品</div>
        </div>
      </div>
    </div>
    <div v-else class="midfont" style="text-align: center;margin-top: 1rem;">没有专辑可选</div>
<!--    {{WorkGroupIdChoose.join('-')}}-->
    <div class="btnsArea flex">
      <div class="flex-item">
        <BtnCommon class="col-xs-12" bgColor="#00DACD" @click.native="submitChoose">转移到该专辑</BtnCommon>
      </div>
      <div class="flex-item">
        <BtnCommon class="col-xs-12" bgColor="#C4C4C4" @click.native="closeMe">取 消</BtnCommon>
      </div>
    </div>
    <AlertBottom ref="ab"></AlertBottom>
  </div>
</template>
<style scoped>
.ImageBlock{margin: 0 auto}
.WorkGroupChoose{padding-bottom: 3rem;position: relative;background: white;height: 100%;overflow-y: scroll}
.btnsArea{position: fixed;width: 10rem;left:0;bottom:0 !important;height: auto;background: #8C8B8B;z-index: 1000}
.work-group-item{overflow: hidden;max-width: 4.85rem;min-width:4.85rem;height: 4.3rem;margin-top: .1rem;padding: .1rem;box-sizing: border-box;margin-top:.2rem;}
</style>
<script>
import CheckBtn from "../../components/buttons/CheckBtn";
import ImageBlock from "../../components/images/ImageBlock";
import BtnCommon from "../../components/buttons/BtnCommon";

export default {
  name:"WorkGroupChoose",
  components: {CheckBtn, ImageBlock, BtnCommon},
  props:{
    dataList:{
      default:[]
    }
  },
  data(){
    return {
      dDataList:[],
      WorkGroupIdChoose:[]
    }
  },
  methods:{
    changeCheckState(p,e){
      console.log(p);
      this.WorkGroupIdChoose=[]
      if (p.check_status){
        this.WorkGroupIdChoose.push(p.check_id)
      }else{
        this.WorkGroupIdChoose.remove(p.check_id)
      }
    },
    closeMe(){
      this.$emit('closeMe')
    },
    submitChoose(){
      let _this = this
      if (_this.WorkGroupIdChoose.length==0){
        _this.$refs.ab.setIcon("fa fa-exclamation-triangle").setAutoClose(true).setContent('没有选择专辑').show()
        return false
      }
      _this.$emit('submit',_this.WorkGroupIdChoose)
    }
  },
  mounted() {
    let _this = this
    _this.dDataList =_this.dataList
  }
}
</script>
